<template>
  <div class='input'>
    <el-input  v-bind = "$attrs">

      <template v-for = "(value,name) in $slots" #[name] = "slotData">
          <slot :name = "name" v-bind = "slotData || {}"></slot>
      </template>

    </el-input>
  </div>
</template>

<script>
export default {
  name: 'myInput',
  data() {
    return {
      value: undefined
    }
  },
  created() {
    console.log('attrs:', this.$attrs)
    console.log('slots:',this.$slots)
    console.log('ref:',this.$ref)
  }
}
</script>

<style scoped>

.input {
  width:400px;
  transition: 0.3s;
}

.input:hover, .input:focus-within {
  filter: drop-shadow(0 0 3px rgba(0, 50, 100, 0.7));
}


</style>